Build collaborative apps Build the next |
with synced SQLite

import { Events, Schema } from '@livestore/livestore'

// Definition of a events
export const events = {
  todoCreated: Events.synced({
    name: 'v1.TodoCreated',
    schema: Schema.Struct({ id: Schema.String, text: Schema.String, completed: Schema.Boolean.pipe(Schema.optional) }),
  }),
  todoCompleted: Events.synced({
    name: 'v1.TodoCompleted',
    schema: Schema.Struct({ id: Schema.String }),
  }),
  todoUncompleted: Events.synced({
    name: 'v1.TodoUncompleted',
    schema: Schema.Struct({ id: Schema.String }),
  }),
  todoDeleted: Events.synced({
    name: 'v1.TodoDeleted',
    schema: Schema.Struct({ id: Schema.String, deletedAt: Schema.Date }),
  }),
}

import { useStore } from '@livestore/react'
import { tables } from '../livestore/schema.js'

const Todo = ({ todo }: { todo: typeof tables.todos.Type }) => {
  const { store } = useStore()
  // Committed events update the database and are synced
  const complete = () => store.commit(events.todoCompleted(todo.id))

  return <div onClick={complete}>{todo.text}</div>
}

import { State } from '@livestore/livestore'

// Materializers are used to map events to state
const materializers = State.SQLite.materializers(events, {
  'v1.TodoCreated': ({ id, text, completed }) => tables.todos.insert({ id, text, completed }),
  'v1.TodoCompleted': ({ id }) => tables.todos.update({ completed: true }).where({ id }),
  'v1.TodoUncompleted': ({ id }) => tables.todos.update({ completed: false }).where({ id }),
  'v1.TodoDeleted': ({ id, deletedAt }) => tables.todos.update({ deletedAt }).where({ id }),
})

import { Schema, State } from '@livestore/livestore'

// You can model your state as SQLite tables which you can reactively query
export const tables = {
  todos: State.SQLite.table({
    name: 'todos',
    columns: {
      id: State.SQLite.text({ primaryKey: true }),
      text: State.SQLite.text({ default: '' }),
      completed: State.SQLite.boolean({ default: false }),
      deletedAt: State.SQLite.integer({ nullable: true, schema: Schema.DateFromNumber }),
    },
  }),
}

import { useQuery } from '@livestore/react'
import { queryDb } from '@livestore/livestore'
import { tables } from '../livestore/schema.js'

const todos$ = queryDb(
  (get) => tables.todos.where({ deletedAt: null })
)

export const Todos = () => {
  const todos = useQuery(todos$)
  // Reactively updates when the database changes. No loading state needed.

  return (
    <div>
      {todos.map((todo) => (
        <Todo todo={todo} />
      ))}
    </div>
  )
}

// Log to console to see the state
console.log(todos)

// [
//   {
//     id: 'djO3ELp02RxQgk4mRbJWF',
//     text: 'Learn about LiveStore',
//     completed: true
//   },
//   {
//     id: 't3vUQjBZX4hvzrjnsgJ-V',
//     text: 'Try LiveStore devtools',
//     completed: false
//   },
//   {
//     id: 'MRPD4ICIBP58tpSZ89CB7',
//     text: 'Build a LiveStore app',
//     completed: false
//   },
// ]

import { useQuery, useStore } from '@livestore/react'
import { tables } from '../livestore/schema.js'

const visibleTodos$ = queryDb(..) // see reactive query

export const Todos = () => {
  const todos = useQuery(visibleTodos$)

  return (
    <div>
      {todos.map((todo) => (
        <Todo todo={todo} />
      ))}
    </div>
  )
}

const Todo = ({ todo }: { todo: typeof tables.todos.Type }) => {
  const { store } = useStore()
  const complete = () => store.commit(events.todoCompleted(todo.id))

  return <div onClick={complete}>{todo.text}</div>
}